import React, { useEffect, useState } from 'react'

export default function CancelEffectDemo() {
  const [count, setCount] = useState(0)
  /*
   * 本身接受两个参数
   * 第一个参数是一个回调函数，它本身也会返回一个回调函数，而这个函数会在组件每次更新/卸载
   * 时被调用。为了防止我们的订阅被取消，所以传入第二个参数是一个数组。
  */
  useEffect(() => {
    console.log('订阅了~~~~~~')
    
    
    return () => {
      console.log('frist的result。组件被卸载时取消订阅!!')
    }
  }, [])
  
  return (
    <div>
      <h2>当前计数：{count}</h2>
      <button onClick={e => setCount(count + 1)}>会触发useEffect的第一个参数的返回值函数</button>
    </div>
  )
}
